<template>
  <el-card shadow="never" :body-style="{paddingBottom:'0px'}">
    <el-row :gutter="24">
      <el-form :model="page" ref="page" :rules="rulesPage" label-width="80px">
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('APP名称')" prop="productName">
            <el-select v-model="page.productName" style="width: 100%" clearable>
              <el-option v-for="item in productList" :key="item.productId"
                         :value="item.productName"
                         :label="item.appName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-form-item :label="$t('手机号码')" prop="phone">
            <el-input v-model="page.phone" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
          <el-button type="primary" @click="genCode">{{ $t('生成验证码') }}</el-button>
        </el-col>
      </el-form>
    </el-row>
    <Dialog :visible.sync="visibleCode" :title="$t('生成验证码')" @cancel="visibleCode = false" :footer="false">
      <el-form label-width="80px">
        <el-form-item :label="$t('手机号码')">
          <div style="line-height: 32px">
            {{ form.phone }}
          </div>
        </el-form-item>
        <el-form-item :label="$t('验证码')">
          <div style="line-height: 32px">
            {{ form.code }} <i style="margin-left: 5px" @click="copyCode"
                               class="el-icon-document-copy cursor_pointer"></i>
          </div>
        </el-form-item>
      </el-form>
    </Dialog>
  </el-card>
</template>

<script>
import {createSendCode} from '@/api/marketing'
import {selectProduct} from "@/api/system";

export default {
  name: "GenCode",
  data() {
    return {
      productList: [],
      page: {},
      visibleCode: false,
      form: {
        productName: null,
        phone: null
      },
      rulesPage: {
        productName: [
          {required: true, message: this.$t('请选择')},
        ],
        phone: [
          {required: true, message: this.$t('不能为空')},
        ]
      }
    }
  },
  mounted() {
    selectProduct({status: 1}).then(res => {
      this.productList = res.data
    })
  },
  methods: {
    // 生成验证码
    genCode() {
      this.$refs.page.validate(async v => {
        if (v) {
          const res = await createSendCode(this.page)
          if (res.code === 1) {
            this.form = {
              phone: this.page.phone,
              code: res.data.smsCode
            }
            this.visibleCode = true
          }
        }
      })
    },
    copyCode() {
      let input = document.createElement("input");
      input.value = this.form.code || ''
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      this.$message.success(this.$t('复制成功'))
      document.body.removeChild(input);
    }
  }
}
</script>

<style scoped>

</style>
